<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<title>江西省大组工网网络监管平台</title>
<head>
    <link rel="stylesheet" href="./swiper-bundle.min.css"/>
    <style>
        @font-face {
            font-family: AlibabaPuHuiTi-Bold;
            font-weight: bold;
            src: url("./otf/AlibabaPuHuiTi-3-85-Bold.ttf") format("opentype");
        }

        @font-face {
            font-family: DINCond-Medium-Regular;
            src: url("./otf/DINCond-Medium-Regular.otf") format("opentype");
        }

        .numFont {
            font-family: DINCond-Medium-Regular;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            color: '#fff';
            font-size: 14px;
        }

        body {
            display: flex;
            flex-direction: column;
            background: url('./img/city_bg.png') no-repeat;
            color: #fff;
            background-size: cover;
        }

        .title {
            height: 80px;
            line-height: 80px;
            padding-left: 38px;
            font-size: larger;
            font-weight: 600;
            text-align: center;
            padding: 0 10px;
        }

        .content {
            display: flex;
            height: 100%;
            margin: 0 10px 0 10px;
            padding-bottom: 10px;
            flex: 1;
        }

        .l-top, .l-bittom, .c-top, .c-bottom, .r-top, .r-center, .r-bottom {
            height: 50%;
        }

        .center {
            flex: 1;
            /* border: 1px solid red; */
            margin: 0 10px;
            display: flex;
            flex-direction: column;
        }

        .right, .l-top, .l-bittom, .c-top, .c-bottom, .r-top, .r-center, .r-bottom {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="center" id="container">
        <a href="/big/navigation" class="back" style="width:205px;height: 60px;
      margin: 8px auto;line-height: 60px;cursor: pointer;position:fixed;display: grid;
bottom: 34px;text-align: center; background: url('./img/backindex.png') no-repeat;background-size: cover;background-position: center;">
            返回首页
        </a>
        <div class="back" style="margin: 8px auto;position:fixed;right:160px;text-align: center;">
						<span class="jump provinces" style="border: 1px solid;padding: 0 12px;height: 34px;margin: 8px auto;line-height: 34px;
						       cursor: pointer;display:inline-block;background: #0060AA;border: 1px solid #0060AA;">
							省直机关
						</span>
            <a href="/big/city" class="jump citys" style="border: 1px solid;padding: 0 12px;height: 34px;margin: 8px auto;line-height: 34px;
						       cursor: pointer;display:inline-block;background: #0D1119;border: 1px solid #015B87;">
                市直机关
            </a>
        </div>
        <div class="back" style="margin: 8px auto;position:fixed;right:160px;
									bottom:140px;text-align: center;">
            <div class="orgNum numFont"
                 style="font-weight: 900;color: #EDF3FF;font-size: 80px;text-shadow: 3px 0px 7px #000000;
                         font-family: DINCond-Medium-Regular;background: url('./img/accessNum.png') no-repeat;background-size: contain;background-position: bottom;">
                0
            </div>
            <div style="font-size: 18px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color:#EDF3FF;">
                已接入省直机关数
            </div>
        </div>
    </div>
</div>
</body>
<script src="./jquery-3.7.0.min.js"></script>
<script src="./g6.min.js"></script>
<script type="application/javascript">

    const data = {
        nodes: [
            {
                id: '0',
                label: '0',
                cluster: '0',
            },
            {
                id: '1',
                label: '1',
                cluster: '0',
            },
            {
                id: '2',
                label: '2',
                cluster: '0',
            },
            {
                id: '3',
                label: '3',
                cluster: '0',
            },
            {
                id: '4',
                label: '4',
                cluster: '0',
            },
            {
                id: '5',
                label: '5',
                cluster: '3',
            },
            {
                id: '6',
                label: '6',
                cluster: '0',
            },
            {
                id: '7',
                label: '7',
                cluster: '0',
            },
            {
                id: '8',
                label: '8',
                cluster: '0',
            },
            {
                id: '9',
                label: '9',
                cluster: '3',
            },
            {
                id: '10',
                label: '10',
                cluster: '3',
            },
            {
                id: '11',
                label: '11',
                cluster: '2',
            },
            {
                id: '12',
                label: '12',
                cluster: '2',
            },
            {
                id: '13',
                label: '13',
                cluster: '4',
            },
            {
                id: '14',
                label: '14',
                cluster: '2',
            },
            {
                id: '15',
                label: '15',
                cluster: '2',
            },
            {
                id: '16',
                label: '16',
                cluster: '2',
            },
            {
                id: '17',
                label: '17',
                cluster: '1',
            },
            {
                id: '18',
                label: '18',
                cluster: '4',
            },
            {
                id: '19',
                label: '19',
                cluster: '4',
            },
            {
                id: '20',
                label: '20',
                cluster: '4',
            },
            {
                id: '21',
                label: '21',
                cluster: '0',
            },
            {
                id: '22',
                label: '22',
                cluster: '2',
            },
            {
                id: '23',
                label: '23',
                cluster: '2',
            },
            {
                id: '24',
                label: '24',
                cluster: '2',
            },
            {
                id: '25',
                label: '25',
                cluster: '3',
            },
            {
                id: '26',
                label: '26',
                cluster: '4',
            },
            {
                id: '27',
                label: '27',
                cluster: '4',
            },
            {
                id: '28',
                label: '28',
                cluster: '1',
            },
            {
                id: '29',
                label: '29',
                cluster: '1',
            },
            {
                id: '30',
                label: '30',
                cluster: '4',
            },
            {
                id: '31',
                label: '31',
                cluster: '4',
            },
            {
                id: '32',
                label: '32',
                cluster: '1',
            },
            {
                id: '33',
                label: '33',
                cluster: '2',
            },
        ],
        edges: [],
        combos: [
            {
                id: 'a',
                label: 'Combo A',
                type:'rect',
                style: {
                    fill: '#steelblue',
                    stroke: '#d28fff',
                    lineWidth: 5,
                    fillOpacity:0
                },
            },
            {
                id: 'b',
                label: 'Combo B',
                type:'rect',
                style: {
                    fill: '#steelblue',
                    stroke: '#229f45',
                    lineWidth: 5,
                    fillOpacity:0
                },
            },
            {
                id: 'c',
                label: 'Combo C',
                type:'rect',
                style: {
                    fill: '#steelblue',
                    stroke: '#8f9eff',
                    lineWidth: 5,
                    fillOpacity:0
                },
            }
        ],
    };

    const colors = [
        '#BDD2FD',
        '#BDEFDB',
        '#C2C8D5',
        '#FBE5A2',
        '#F6C3B7',
        '#B6E3F5',
        '#D3C6EA',
        '#FFD8B8',
        '#AAD8D8',
        '#FFD6E7',
    ];
    const strokes = [
        '#5B8FF9',
        '#5AD8A6',
        '#5D7092',
        '#F6BD16',
        '#E8684A',
        '#6DC8EC',
        '#9270CA',
        '#FF9D4D',
        '#269A99',
        '#FF99C3',
    ];

    const nodes = data.nodes;
    const clusterMap = new Map();
    let clusterId = 0;
    nodes.forEach(function (node) {
        // cluster
        if (node.cluster && clusterMap.get(node.cluster) === undefined) {
            clusterMap.set(node.cluster, clusterId);
            clusterId++;
        }
        const cid = clusterMap.get(node.cluster);
        if (!node.style) node.style = {};
        node.style.fill = colors[cid % colors.length];
        node.style.stroke = strokes[cid % strokes.length];

        if (node.cluster==='0'){
            node.comboId='a';
        }else if (node.cluster==='1'){
            node.comboId='b';
        }else {
            node.comboId='c';
        }
    });

    const container = document.getElementById('container');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new G6.Graph({
        container: 'container',
        width,
        height,
        modes: {
            default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
        },
        layout: {
            type: 'grid',
            begin: [20, 20],
            width: width - 20,
            height: height - 20,
            sortBy: 'cluster',
        },
        animate: true,
        defaultNode: {
            size: 20,
        },
    });
    graph.data(data);
    graph.render();

    if (typeof window !== 'undefined')
        window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight);
        };

</script>
</html>
